import React, { memo, Component, lazy, Suspense } from 'react'
import { StudentInfo } from '../../utils/model'
import { baseUrl } from '../../assets/baseUrl'
import { Spin, Badge, message, Modal, Input,Alert } from 'antd'
import { Route, Switch } from 'react-router-dom'
// import {withRouter} from "react-router-dom";
import Marquee from 'react-fast-marquee'
import './index.css'
import { postOld, fixKey } from '@/api/index'
import ChangePassword from './changepassword'
import { LoginOutlined } from '@ant-design/icons'
// import Modal from 'antd/lib/modal/Modal';
const SetmyBasicInfo = lazy(() => import('./setMyInfo')) //工作台
const ClassInfo = lazy(() => import('./classInfo')) //邮箱
const MyEmail = lazy(() => import('./email')) //邮箱
const emailDetail = lazy(() => import('./emailDetail')) //邮件详情
const BaseUrl = baseUrl()

class myCenter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      userInfo: null,
      emailCount: localStorage.getItem('emailCount'),
      isOpen: false,
      isButton: false, //默认显示第一步的按钮
      oldKey: '',
      NewKey: '',
      NewKey2: '',
      keyCode: '',
      Email:'',
    }
  }
  ChangeHistory = (url) => {
    this.props.history.push(url)
  }
  static contextType = StudentInfo
  componentDidMount() {
    this.setState({
      userInfo: this.context.studentInfo
    })
    console.log(this, "????");
  }
  nextStep = () => {
      if(!this.state.oldKey) {
          message.warn('请输入旧密码哦～')
          return
      }
    postOld({ password: this.state.oldKey }).then((res) => {
      console.log(res.data.code, '验证消息')
      // this.setState({isButton:true});
      if (res.data.code == 200 && res.data.email != null) {
          message.success('密码核验通过～')
        this.setState({ isButton: true,Email:res.data.email })
      } else if (res.data.code == 400) {
        message.error('密码错误！')
      } else {
        message.error('请先绑定邮箱！')
      }

      // this.setState({
      //     dataSource: res.data.list
      // })
    })
  }
  FixPassword = () => {
    if (this.state.NewKey == '' || this.state.NewKey2 == '') {
      message.error('密码不能为空！')
    } else if (this.state.NewKey == this.state.NewKey2) {
      fixKey({
        verification: this.state.keyCode,
        newWord: this.state.NewKey2
      }).then((res) => {
        console.log(res, '验证消息')

        if (res.data.code == 200) {
          this.setState({ isButton: false, isOpen: false })
          message.success(res.data.message)
          // this.setState({isButton:true});
        } else {
          message.error(res.data.message)
          // this.setState({keyCode:'',NewKey:'',NewKey2:''});
        }
      })
    } else {
      message.error('两次密码不一致！')
    }
  }
  goEmail = () => {
    this.setState({
      emailCount: 0
    })
    localStorage.setItem('emailCount', 0)
    this.ChangeHistory('/home/myCenter/myEmail')
  }

  /* 退出登录 */
  loginOut = () => {
    Modal.confirm({
      title: '确认退出登录？',
      // context:'确认退出登录？',
      onOk: () => window.location.replace('https://www.donglongdong.xyz/uooki'),
      okText: '退出',
      cancelText: '取消',
      onCancel: () => {}
    })
  }
  handleOk = () => {
    this.setState({
      isOpen: true
    })
  }
  render() {
    const { userInfo, headPicUrl, telephone, className, schoolName } =
      this.state
    return (
      <Suspense
        fallback={
          <Spin tip="Loading...">
            <div style={{ height: 500 }}></div>
          </Spin>
        }
      >
        <div className="flex" style={{ position: 'relative' }}>
          <Spin spinning={this.state.loading} size="large">
            <div className="control-center">
              <div>
                <div
                  style={{
                    display: 'flex',
                    justifyItems: 'center',
                    padding: '10vh 0 5vh 0'
                  }}
                >
                  {userInfo?.headPicUrl && <img
                    src={BaseUrl + userInfo?.headPicUrl}
                    alt=""
                    style={{
                      height: 72,
                      width: 72,
                      display: 'inline-block',
                      border: 'none',
                      borderRadius: '50%',
                      margin: '0 auto'
                    }}
                  />}
                </div>
                <ul className="basicInfoLi">
                  <li>
                    昵&emsp;称：<span>{userInfo?.nickName}</span>
                  </li>
                  <li>
                    手机号：<span>{userInfo?.telephone}</span>
                  </li>
                  <li>
                    学&emsp;校：
                    <span>
                      {userInfo?.schoolName === 'null' ? '暂未选择学校' : userInfo?.schoolName}
                    </span>
                  </li>
                  <li>
                    班&emsp;级：
                    <span>
                      {userInfo?.className === 'null' ? '暂未选择班级' : userInfo?.className}
                    </span>
                  </li>
                </ul>
                <div className="setInfoLi">
                  <div
                    onClick={() => {
                      this.ChangeHistory('/home/myCenter/setMyInfo')
                    }}
                  >
                    <span>
                      个人信息<i className="iconfont icon-arrow-right"></i>
                    </span>
                  </div>
                  <div
                    onClick={() => {
                      this.ChangeHistory('/home/myCenter/classInfo')
                    }}
                  >
                    <span>
                      班级通讯录<i className="iconfont icon-arrow-right"></i>
                    </span>
                  </div>
                  <div
                    onClick={() => {
                      this.goEmail()
                    }}
                  >
                    <span>
                      <Badge
                        count={this.state.emailCount}
                        style={{ backgroundColor: '#52c41a' }}
                      >
                        邮箱
                      </Badge>
                      <i className="iconfont icon-arrow-right"></i>
                    </span>
                  </div>
                  <div
                    className="fixPassword"
                    onClick={() => {
                      this.setState({ isOpen: true })
                    }}
                  >
                    <span>
                      修改密码<i className="iconfont icon-arrow-right"></i>
                    </span>
                  </div>
                  {this.state.isOpen ? (
                    <Modal
                      title="修改密码"
                    //   centered={true}
                      cancelText="取消"
                      destroyOnClose={true}
                      okText={
                        this.state.isButton ? (
                          <div onClick={() => this.FixPassword()}>修改</div>
                        ) : (
                          <div
                            onClick={() => {
                              this.nextStep()
                            }}
                          >
                            下一步
                          </div>
                        )
                      }
                      visible={this.state.isOpen}
                      onOk={this.handleOk}
                      onCancel={() => {
                        this.setState({
                          isOpen: false,
                          isButton: false,
                          oldKey: ''
                        })
                      }}
                    >
                      {this.state.isButton ? (
                        <div>
                            <Alert message={`我们已向您的邮箱 ${this.state.Email}发送了一封验证邮件，请核验验证码~`} type="success" showIcon />
                          <div style={{ display: 'flex',marginTop:'10px'}}>
                            <span
                              style={{ height: '30px', lineHeight: '33px' }}
                            >
                              验证码：
                            </span>
                            <div style={{ width: '300px', height: '40px' }}>
                              <Input
                                value={this.state.keyCode}
                                onChange={(e) => {
                                  this.setState({ keyCode: e.target.value })
                                }}
                                placeholder="请输入邮箱验证码"
                              />
                            </div>
                          </div>
                          <div style={{ display: 'flex' }}>
                            <span
                              style={{ height: '30px', lineHeight: '33px' }}
                            >
                              新密码：
                            </span>
                            <div style={{ width: '300px', height: '40px' }}>
                              <Input
                                type="password"
                                value={this.state.NewKey}
                                onChange={(e) => {
                                  this.setState({ NewKey: e.target.value })
                                }}
                                placeholder="请输入新密码"
                              />
                            </div>
                          </div>
                          <div style={{ display: 'flex' }}>
                            <span
                              style={{ height: '30px', lineHeight: '33px' }}
                            >
                              重复新密码：
                            </span>
                            <div style={{ width: '300px', height: '40px' }}>
                              <Input
                                type="password"
                                value={this.state.NewKey2}
                                onChange={(e) => {
                                  this.setState({ NewKey2: e.target.value })
                                }}
                                placeholder="请输入新密码"
                              />
                            </div>
                          </div>
                        </div>
                      ) : (
                        <div style={{ display: 'flex' }}>
                          <span style={{ height: '30px', lineHeight: '33px' }}>
                            旧密码：
                          </span>
                          <div style={{ width: '300px', height: '40px' }}>
                            <Input
                              type="password"
                              value={this.state.oldKey}
                              onChange={(e) => {
                                this.setState({ oldKey: e.target.value })
                              }}
                              placeholder="请输入旧密码"
                            />
                          </div>
                        </div>
                      )}
                    </Modal>
                  ) : null}
                  <div className="loginOut" onClick={this.loginOut.bind(this)}>
                    <span>
                      退出登录<i className="iconfont icon-arrow-right"></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </Spin>
          {}
          <Switch>
            <Route exact path="/home/myCenter" component={SetmyBasicInfo} />
            <Route
              exact
              path="/home/myCenter/setMyInfo"
              component={SetmyBasicInfo}
            />
            <Route
              exact
              path="/home/myCenter/classInfo"
              component={ClassInfo}
            />
            <Route exact path="/home/myCenter/myEmail" component={MyEmail} />
            <Route
              exact
              path="/home/myCenter/emailDetail"
              component={emailDetail}
            />
          </Switch>
        </div>
      </Suspense>
    )
  }
}
export default memo(myCenter)
